<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script src="js/vue-2.6.10.js"></script>
  <script src="js/axios.min.js"></script>

</head>
<body>
<div id="app">
    <ul>
        <li v-for="(user, index) in users" :key="index">
            {{index}}--{{user.name}}--{{user.age}}
        </li>
    </ul>
</div>
<script type="text/javascript">
    var app=new Vue({

        el:"#app",
        data:{
            users:[]
        },

    created() {

        //初始化数据 axios(config)   axios.get(url,config),axios.post(url,data,config);
        axios.post("data.json").then(res => {
            //将数据赋值到vue实例中的数据属性users；
            //不能使用this，在axios回调函数中表示窗口，不是vue实例
            console.log(res);
            app.users = res.data;
        }).catch(err => alert(err));
          /*  axios.get("data.json").then(res=>{
                //
                console.log(res);
                app.users=res.data.users;
            }).catch(err=>alert(err));*/

           /* axios({
                //路径
                url:"data.json",
                //请求方式
                method:"get"
            }).then(res=>{
                //
                console.log(res);
                app.users=res.data.users;
            }).catch(err=>alert(err));*/
        }
    })
</script>

</body>
</html>